<template>
  <div id="container">
    <!-- 顶部组件 -->
    <TopSearch @searchData="searchData"></TopSearch>

    <!-- 页面头部栏 -->
    <div id="header">
      <span>套餐列表</span>
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="small"
        @click="addNewCampaign = true"
        >新增促销商品</el-button
      >
    </div>

    <!-- 点击新增按钮后的一级弹窗表单 -->
    <el-dialog title="新增商品" :visible.sync="addNewCampaign">
      <el-form :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间:" :label-width="formLabelWidth">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.start"
                size="medium"
                style="width: 25rem"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间:" :label-width="formLabelWidth">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.end"
                size="medium"
                style="width: 25rem"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="促销人群:" :label-width="formLabelWidth">
              <el-select
                v-model="form.crowd"
                placeholder="选择促销人群"
                size="medium"
                style="width: 25rem"
              >
                <el-option
                  v-for="item in crowd"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="促销模式:" :label-width="formLabelWidth">
              <el-select
                v-model="form.pattern"
                placeholder="选择促销模式"
                size="medium"
                style="width: 25rem"
              >
                <el-option
                  v-for="item in pattern"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="促销范围:" :label-width="formLabelWidth">
              <el-select
                v-model="form.ranger"
                placeholder="选择促销范围"
                size="medium"
                style="width: 25rem"
              >
                <el-option
                  v-for="item in ranger"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态:" :label-width="formLabelWidth">
              <el-switch
                style="display: block; height: 4rem; line-height: 4rem"
                v-model="form.state"
                active-color="#13ce66"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 下方表格 -->
        <el-row>
          <el-col :span="24">
            <el-table
              :data="selectedDish"
              border
              style="margin-top: 1rem; width: 100%"
            >
              <!-- <el-table-column label="序号" width="150" align="center">
                <template slot-scope="scope">{{ scope.row.id }}</template>
              </el-table-column> -->
              <el-table-column label="菜品名称" width="250" align="center">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column label="价格" width="180" align="center">
                <template slot-scope="scope">{{ scope.row.price }}</template>
              </el-table-column>
              <el-table-column label="数量" width="180" align="center">
                <template slot-scope="scope">{{ scope.row.quantity }}</template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <el-button size="mini" @click="getDishTypeID('汤')"
                  >添加</el-button
                >
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addNewCampaign = false">取 消</el-button>
        <el-button type="primary" @click="addNewPromo">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 点击添加按钮后的二级弹窗表单 -->
    <el-dialog title="选择菜品" :visible.sync="addNewFood" width="40%">
      <div>
        <!-- 动态渲染类别标签栏 -->
        <el-row style="margin-top: 2rem">
          <el-tabs
            tab-position="left"
            style="height: 300px"
            @tab-click="getDishTypeID"
          >
            <el-tab-pane
              v-for="item in dishTypeTable"
              :key="item.id"
              :label="item.category"
            >
              <!-- 动态渲染商品 -->
              <el-radio-group v-model="checkDishList">
                <el-radio
                  v-for="item in dishFileTable"
                  :key="item.id"
                  :label="item.id"
                  border
                  size="medium"
                  style="margin-top: 1rem; margin-left: 0"
                  >{{ item.name }}
                </el-radio>
              </el-radio-group>
            </el-tab-pane>
          </el-tabs>
        </el-row>
        <el-row style="margin-top: 2rem"> </el-row>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addNewFood = false">取 消</el-button>
        <el-button type="primary" @click="getCheckedDish">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 动态渲染页面表格内容 -->
    <el-table :data="tableData" border style="margin-top: 1rem; width: 100%">
      <el-table-column label="序号" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="菜品名称" width="200" align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="菜品编码" width="200" align="center">
        <template slot-scope="scope">{{ scope.row.number }}</template>
      </el-table-column>
      <el-table-column label="开始日期" width="150" align="center">
        <template slot-scope="scope">{{ scope.row.start }}</template>
      </el-table-column>
      <el-table-column label="结束日期" width="150" align="center">
        <template slot-scope="scope">{{ scope.row.end }}</template>
      </el-table-column>
      <el-table-column label="状态" width="130" align="center">
        <template slot-scope="scope">{{ scope.row.state }}</template>
      </el-table-column>
      <el-table-column label="创建人" width="130" align="center">
        <template slot-scope="scope">{{ scope.row.creator }}</template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="250">
        <template slot-scope="scope">{{ scope.row.discount }}</template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="observePromo(scope.row.id)"
            >查看</el-button
          >
          <el-button
            type="warning"
            size="mini"
            @click="editPromoState(scope.row.id)"
            >促销更改</el-button
          >
          <el-button
            type="danger"
            size="mini"
            @click="deletePromo(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <Page :totalCount="totalCount" @shareData="shareData"></Page>
  </div>
</template>

<script>
import TopSearch from "./../../components/common/search_3";
import Page from "./../../components/common/Pagination.vue";
export default {
  data() {
    return {
      input: "",
      tableData: [], //初始化时渲染表格数据
      dishTypeTable: [], //菜品类别
      dishFileTable: [], //菜品档案
      addNewCampaign: false, //一级dialog开关
      addNewFood: false, //二级dialog开关
      checkDishList: [], //二级菜单中选中的菜品的id
      form: {
        //新建套餐表单的内容
        start: "",
        end: "",
        crowd: "",
        pattern: "",
        ranger: "",
        state: true,
        dishFileFId: 0,
        quantity: 0,
        creator: "蟹黄包",
        price: 0,
      },
      selectedDish: [
        //一级dialog下方表格
        {
          id: "",
          name: "",
          price: "",
          quantity: "",
        },
      ],
      formLabelWidth: "80px",
      crowd: [
        //促销人群
        {
          value: "普通用户",
          label: "普通用户",
        },
        {
          value: "新用户",
          label: "新用户",
        },
        {
          value: "会员",
          label: "会员",
        },
        {
          value: "全部",
          label: "全部",
        },
      ],
      value: "",
      pattern: [
        //促销模式
        {
          value: "特价",
          label: "特价",
        },
        {
          value: "折扣",
          label: "折扣",
        },
        {
          value: "买一送一",
          label: "买一送一",
        },
        {
          value: "第二份半价",
          label: "第二份半价",
        },
      ],
      ranger: [
        //促销范围
        {
          value: "指定商品",
          label: "指定商品",
        },
        {
          value: "所有商品",
          label: "所有商品",
        },
      ],

      // 分页
      totalCount: 0,
      nowPage: 1,
      pageCount: 5,
    };
  },
  components: {
    TopSearch,
    Page,
  },
  created() {
    // 在页面创建时获取表格数据并渲染
    this.getPromoList(this.nowPage, this.pageCount);
    // 获取菜品类别
    this.getDishType();
    // 获取菜品信息
    this.getDishFile();
  },

  methods: {
    // 分页
    shareData(v) {
      this.nowPage = v.nowPage;
      this.pageCount = v.pageCount;
      this.getPromoList(this.nowPage, this.pageCount);
    },

    // 获取列表数据
    async getPromoList(page, pageSize) {
      const { data: res } = await this.axios.post("/promo/listname", {
        page: page,
        pageSize: pageSize,
      });
      let tableData = res.data;
      // console.log(res.data);
      // 遍历数组修改数据
      tableData.forEach((item) => {
        // 修改促销状态
        let nowTime = new Date().getTime();
        if (item.end - nowTime > 0 && item.state == "正常") {
          item.state = "正常";
        } else if (item.end - nowTime > 0 && item.state == "暂停促销") {
          item.state = "暂停促销";
        } else if (item.end - nowTime < 0) {
          item.state = "促销结束";
        }
        // 将时间戳转换为本地时间
        let start = this.timeTransfer(item.start);
        let end = this.timeTransfer(item.end);
        let discount = this.timeTransfer(item.discount);
        item.start = start;
        item.end = end;
        item.discount = discount;
      });
      this.tableData = res.data;
      this.totalCount = res.count;
    },

    // 删除单条数据
    async deletePromo(vid) {
      console.log(vid);
      const { data: res } = await this.axios.get("/promo/delete/" + vid);
      this.getPromoList();
      console.log(res);
    },

    // 添加新促销
    async addNewPromo() {
      // 隐藏添加窗口
      this.addNewCampaign = false;
      // 条件判断转换按钮的值
      if (this.form.state == true) {
        this.form.state = "正常";
      } else {
        this.form.state = "暂停促销";
      }
      // console.log(this.selectedDish);
      const { data: res } = await this.axios.post("/promo/add", {
        crowd: this.form.crowd,
        discount: new Date(),
        start: this.form.start,
        end: this.form.end,
        pattern: this.form.pattern,
        ranger: this.form.ranger,
        state: this.form.state,
        creator: this.form.creator,
        id: 0,
        dishFileFId: this.selectedDish[0].id,
        price: this.selectedDish[0].price,
        quantity: this.selectedDish[0].quantity,
        category: this.selectedDish[0].category,
        name: this.selectedDish[0].name,
        number: this.selectedDish[0].dish_no,
      });
      // console.log(res);
      this.getPromoList();
    },

    // 获取菜品类别
    async getDishType() {
      const { data: res } = await this.axios.post(
        "/dishesCategory/findCategory",
        {
          page: 1,
          pageSize: 999,
        }
      );
      this.dishTypeTable = res.data;
      // console.log(this.dishTypeTable);
    },

    // 获取菜品档案
    async getDishFile() {
      const { data: res } = await this.axios.post("/dishFile/list", {
        page: 1,
        pageSize: 999,
      });
      // console.log(res);
    },

    // 获取各类别的菜品名
    async getDishTypeID(tab) {
      this.addNewFood = true;
      // 点击标签 获得标签的名字
      let DishTypeName = tab.label;
      // console.log(DishTypeName);
      // 调用类别查询接口,通过名字查询类别的id
      const { data: res } = await this.axios.post("/dishesCategory/list", {
        name: DishTypeName,
      });
      // console.log(res.data);
      // 调用菜品查询接口,通过类别id查询菜品
      let dishTypeID = res.data[0].id;
      // console.log(dishTypeID);
      const { data: r } = await this.axios.post("/dishFile/list", {
        categoryName: dishTypeID,
      });
      // 存储数据
      this.dishFileTable = r.data;
      // console.log(this.dishFileTable);
    },

    // 获取选中菜品信息
    async getCheckedDish() {
      // addNewFood = false
      let did = this.checkDishList;
      // console.log(did);
      let addedDish = this.dishFileTable.filter((x) => x.id === did)[0];
      // 调用库存接口查询菜品数量
      const { data: res } = await this.axios.get("/stock/" + did);
      console.log(res.data);

      addedDish.quantity = res.data.stock;
      this.form.quantity = res.data.stock;
      this.form.dishFileFId = res.data.id;
      // console.log(this.form.dishFileFId);
      // console.log(this.form.quantity);
      // console.log(addedDish);
      this.selectedDish.unshift(addedDish);
      this.selectedDish.splice(1, 1);
      this.addNewFood = false;
    },

    // 修改状态
    async editPromoState(vid) {
      // console.log(vid);
      let addedPack = this.tableData.filter((x) => x.id === vid)[0];
      // console.log(addedPack.state);
      if (addedPack.state == "正常" || addedPack.state == "正常促销") {
        const { data: res } = await this.axios.post(
          "/promo/state" + `?id=${vid}&state=暂停促销`
        );
        // console.log(res);
        this.getPromoList();
      }
      if (addedPack.state == "暂停促销") {
        const { data: res } = await this.axios.post(
          "/promo/state" + `?id=${vid}&state=正常`
        );
        this.getPromoList();
      }
    },

    // 时间戳转换为当地时间的方法
    timeTransfer(timestamp) {
      let time = new Date(timestamp);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let minute = time.getMinutes();

      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }

      return year + "-" + month + "-" + date + " " + hours + ":" + minute;
    },

    // 查看促销商品
    async observePromo(vid) {
      this.addNewCampaign = true;
      const { data: res } = await this.axios.get("/promo/" + vid);

      // console.log(res.data[0]);
      this.form.start = res.data[0].start;
      this.form.end = res.data[0].end;
      this.form.crowd = res.data[0].crowd;
      this.form.ranger = res.data[0].ranger;
      this.form.pattern = res.data[0].pattern;
      if (res.data[0].state == "正常") {
        this.form.state = true;
      } else {
        this.form.state = false;
      }
      // this.selectedDish[0].id = res.data[0].category_id
      this.selectedDish[0].name = res.data[0].dname;
      this.selectedDish[0].price = res.data[0].dprice;
      this.selectedDish[0].quantity = res.data[0].quantity;
      // this.form = res.data
    },

    // 搜索功能
    searchData(v) {
      this.tableData = v.data;
      this.totalCount = v.count;
      // console.log(v);
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  font-size: 1.5rem;
  vertical-align: center;
}

#header {
  margin-top: 1rem;
  height: 3rem;
  line-height: 3rem;
  background-color: lightgray;
  padding: 1.5rem;
  & > button {
    float: right;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed black !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>